import React, {Component} from 'react';
import {connect} from 'dva';
import styles from "./OaTree.less";
import {Tree} from "antd";
import {Input} from "antd";
import {get, isEmpty} from "lodash"
import {ConnectState} from "@/models/connect";
const {Search} = Input;
const dataList = [];
const generateList = data => {
  for (let i = 0; i < data.length; i++) {
    const node = data[i];
    const {key, title} = node;
    dataList.push({key, title});
    if (node.children) {
      generateList(node.children);
    }
  }
};
const getParentKey = (key, tree) => {
  let parentKey;
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i];
    if (node.children) {
      if (node.children.some(item => item.key === key)) {
        parentKey = node.key;
      } else if (getParentKey(key, node.children)) {
        parentKey = getParentKey(key, node.children);
      }
    }
  }
  return parentKey;
};
class OaTree extends Component {
  static defaultProps = {
    treeData: [],
    onSelect: (res: any) => {
    }
  }
  state = {
    expandedKeys: [],
    searchValue: '',
    autoExpandParent: true,
  };
  componentDidMount() {
  }
  componentDidUpdate(prevProps: any, prevState: any, snapshot?: any): void {
    if (this.props.treeData != prevProps.treeData && !isEmpty(this.props.treeData)) {
      generateList(this.props.treeData);
      this.setState({
        expandedKeys: [get(this.props.treeData[0], "key", ""),get(this.props.treeData[1], "key", ""),get(this.props.treeData[3], "key", "")]
      })
    }
  }
  onChange = e => {
    const {value} = e.target;
    const expandedKeys = dataList
      .map(item => {
        if (item.title.indexOf(value) > -1) {
          return getParentKey(item.key, this.props.treeData);
        }
        return null;
      })
      .filter((item, i, self) => {
        return item && self.indexOf(item) === i
      });
    this.setState({
      expandedKeys,
      searchValue: value,
      autoExpandParent: true,
    }, (res: any) => {
    });
  };
  onExpand = expandedKeys => {
    this.setState({
      expandedKeys,
      autoExpandParent: false,
    });
  };
  render() {
    const {searchValue, expandedKeys, autoExpandParent} = this.state;
    const loop = data =>
      data.map(item => {
        const index = item.title.indexOf(searchValue);
        const beforeStr = item.title.substr(0, index);
        const afterStr = item.title.substr(index + searchValue.length);
        const title =
          index > -1 ? (
            <span>
              {beforeStr}
              <span className={styles.siteTreeSearchValue}>{searchValue}</span>
              {afterStr}
            </span>
          ) : (
            <span>{item.title}</span>
          );
        if (item.children) {
          return {title, key: item.key, children: loop(item.children)};
        }
        return {
          title,
          key: item.key,
        };
      });
    return <>
      {
        get(this.props, "treeData", []).length > 0 && <div className={styles.OaTree}>
            <Search style={{marginBottom: 8}} placeholder="Search" onChange={this.onChange}/>
            <Tree
                virtual={true}
                defaultSelectedKeys={[this.props.treeData[0].key]}
                onSelect={this.props.onSelect}
                onExpand={this.onExpand}
                showLine={true}
                showIcon={true}
                expandedKeys={expandedKeys}
                autoExpandParent={autoExpandParent}
                treeData={loop(this.props.treeData)}
            />
        </div>
      }
    </>
  }
}
export default connect(
  ({}: ConnectState) => ({}),
)(OaTree);
